<template>
  <section id="header-wrapper">
    <header id="header">
      <div class="header-wrapper">
        <div class="header-left-wrap">
          <NavLink link="/" class="home-link" v-if="$site.themeConfig.logo">
            <img class="logo" :src="$withBase($site.themeConfig.logo)" :alt="$siteTitle">
          </NavLink>
          <NavLink link="/" class="home-link"><span>{{ $site.title }}</span>的部落格</NavLink>
        </div>
        <div class="header-right-wrap">

          <ul v-if="$themeConfig.nav" class="nav">
            <li
                v-for="item in $themeConfig.nav"
                :key="item.text"
                class="nav-item"
            >
              <router-link class="nav-link" :to="item.link">
                <i class="fa" :class="item.icon"></i>
                {{ item.text }}
              </router-link>
            </li>
          </ul>
          <SearchBox/>
          <Feed/>
        </div>
      </div>
    </header>
  </section>
</template>

<script>
import SearchBox from '@SearchBox'
import Feed from './Feed'

export default {
  components: {SearchBox, Feed},
}
</script>

<style lang="stylus">
@import '~@app/style/config'

#header
  z-index 12
  position fixed
  top 0
  width 100vw
  height $headerHeight
  box-sizing border-box
  background-color $headerBgColor
  display flex
  align-items center
  padding-left 32px
  padding-right 32px
  box-shadow 0 5px 20px rgba(0, 0, 0, 0.03), 0 6px 6px rgba(0, 0, 0, 0.05)
  transition all 1s cubic-bezier(0.25, 0.8, 0.25, 1)

  ol, ul
    list-style none
    margin 0
    padding 0

  &:hover
    box-shadow 0 5px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.1)

// border-bottom 5px solid lighten(#3eaf7c, 50%)
.header-wrapper
  flex 1
  display flex
  align-items center
  justify-content space-between

  .header-left-wrap
    margin 0
    display flex
    align-items center

    .home-link
      font-weight 800;
      color #424242;

      span
        border-radius 3px;
        background black;
        color white;
        padding 6px;
        margin-right 5px;


    .logo
      height $headerHeight - 10
      margin-right $headerHeight

    a
      color $darkTextColor
      font-weight bold
      font-family PT Serif, Serif
      text-decoration none

  .header-right-wrap
    flex 1
    display flex
    justify-content flex-end
    align-items center

    .nav
      flex 0 0 auto
      display flex
      margin 0

      .nav-item
        margin-left 20px

        .nav-link
          padding 6px;
          border-radius 2px;
          color $darkTextColor;

          &:hover
            color white !important;
            background-color black;

          &.router-link-active
            color $darkTextColor


        a
          font-size 15px
          text-decoration none
          transition color 0.3s
          font-weight 600;
          text-transform uppercase;
          letter-spacing: 1px;

    .search-box
      font-family PT Serif, Serif
      margin-left 20px

      input
        border-radius $searchBorderRadius
        transition all 0.5s
        border 1px solid #cecece

        &:hover
          border 1px solid $accentColor
          box-shadow 0 0 5px $accentColor

      .suggestions
        border 1px solid $darkBorderColor
        top 40px
        right 0

        a
          color $darkTextColor
          text-decoration none

          &.focused
            color $accentColor

@media (max-width: $MQMobile)
  #header
    display none

  .header-wrapper
    flex-direction column

    .header-right-wrap
      display none
</style>
